---
title: Editor-Einrichtung
description: Richte deinen Code-Editor ein, um etwas mit Astro zu kreieren.
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

Passe deinen Code-Editor an, um die Astro-Entwicklererfahrung zu verbessern und neue Funktionen freizuschalten.

## VS Code

[VS Code](https://code.visualstudio.com/) ist ein beliebter Code-Editor für Webentwickler, der von Microsoft entwickelt wurde. Die VS Code-Engine treibt auch beliebte browserbasierte Code-Editoren wie [GitHub Codespaces](https://github.com/features/codespaces) und [Gitpod](https://gitpod.io/) an.

Astro funktioniert mit jedem Code-Editor. VS Code ist jedoch der von uns empfohlene Editor für Astro-Projekte. Wir bieten eine offizielle [Astro VS Code-Erweiterung](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) an, die mehrere wichtige Funktionen und Verbesserungen für Entwickler in Astro-Projekten freischaltet.

- Syntaxhervorhebung für `.astro`-Dateien.
- TypeScript-Typinformationen für `.astro`-Dateien.
- [VS Code IntelliSense](https://code.visualstudio.com/docs/editor/intellisense) für Code-Vervollständigung, Hinweise und mehr.

Um loszulegen, installiere noch heute die [Astro VS Code-Erweiterung](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode).

import ReadMore from '~/components/ReadMore.astro'

<ReadMore>Schau dir an, wie du in deinem Astro-Projekt [TypeScript einrichtest](/de/guides/typescript/).</ReadMore>

## Zed

[Zed](https://zed.dev/) ist ein Open-Source-Code-Editor, der in Version 0.123.2 Unterstützung für Astro hinzugefügt hat. Du kannst die [Astro-Erweiterung](https://github.com/zed-industries/zed/tree/main/extensions/astro) auf der Registerkarte „Erweiterungen“ der IDE installieren. Diese Erweiterung enthält Funktionen wie Syntaxhervorhebung, Codevervollständigung und Formatierung.

## JetBrains IDEs

[Webstorm](https://www.jetbrains.com/webstorm/) ist eine JavaScript- und TypeScript-IDE, die in Version 2024.2 Unterstützung für den Astro Language Server bietet. Dieses Update bringt Funktionen wie Syntaxhervorhebung, Codevervollständigung und Formatierung.

Installiere das offizielle Plugin über den [JetBrains Marketplace](https://plugins.jetbrains.com/plugin/20959-astro) oder indem du auf der Registerkarte Plugins der IDE nach „Astro“ suchst. Du kannst den Sprachserver unter `Settings | Languages & Frameworks | TypeScript | Astro` ein- und ausschalten.

Weitere Informationen zur Astro-Unterstützung in Webstorm findest du in der [offiziellen Webstorm Astro Dokumentation](https://www.jetbrains.com/help/webstorm/astro.html).

## Andere Code-Editoren

Unsere wunderbare Community stellt mehrere Erweiterungen für andere beliebte Editoren bereit, darunter auch:

- [VS Code-Erweiterung auf Open VSX](https://open-vsx.org/extension/astro-build/astro-vscode) <span style="margin: 0.25em;"><Badge text="Offiziell" /></span> - Die offizielle Astro-Erweiterung für VS Code, verfügbar in der Open VSX Registry für quelloffene Plattformen wie [VSCodium](https://vscodium.com/)
- [Nova-Erweiterung](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Community" /></span> - Syntaxhervorhebung, IntelliSense und Autovervollständigung für Astro
- [Vim Plugin](https://github.com/wuelnerdotexe/vim-astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Community" /></span> - Syntaxhervorhebung, Einzug, und Code-Faltungsunterstützung für Astro in Vim oder Neovim
- Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro) und [TreeSitter](https://github.com/virchau13/tree-sitter-astro) Plugins <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Community" /></span> - Syntaxhervorhebung, treesitter Analyse, und Autovervollständigung für Astro in Neovim
- Emacs - Siehe Anleitung für die [Konfiguration von Emacs und Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Community" /></span> um mit Astro zu arbeiten
- [Astro Syntaxhervorhebung für Sublime Text](https://packagecontrol.io/packages/Astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Community" /></span> - Das Astro Paket für Sublime Text, verfügbar im Sublime Text package manager.

## Browser-Editoren

Zusätzlich zu lokalen Code-Editoren funktioniert Astro auch gut in browserbasierten Editoren, einschließlich:

- [StackBlitz](https://stackblitz.com/) und [CodeSandbox](https://codesandbox.io/) - Online-Editoren, die in deinem Browser laufen, mit eingebauter Syntaxhervorhebungs-Unterstützung für `.astro`-Dateien. Keine Installation oder Konfiguration erforderlich!
- [GitHub.dev](https://github.dev/) - ermöglicht die Installation der Astro VS Code-Erweiterung als [Web-Erweiterung](https://code.visualstudio.com/api/extension-guides/web-extensions), bietet aber nur einen reduzierten Funktionsumfang. Derzeit wird nur die Syntaxhervorhebung unterstützt.
- [IDX](https://idx.dev) und [Gitpod](https://gitpod.io/) - eine vollständige Entwicklungsumgebung in der Cloud, mit der die offizielle Astro VS Code-Erweiterung von Open VSX installiert werden kann.

## Andere Tools

### ESLint

[ESLint](https://eslint.org/) ist ein beliebter Linter für JavaScript und JSX. Zur Unterstützung von Astro kann ein [von der Community gepflegtes Plugin](https://github.com/ota-meshi/eslint-plugin-astro) installiert werden.

Sieh dir das [Benutzerhandbuch des Projekts](https://ota-meshi.github.io/eslint-plugin-astro/user-guide/) an, um mehr über die Installation und Einrichtung von ESLint in deinem Projekt zu erfahren.

### Stylelint

[Stylelint](https://stylelint.io/) ist ein beliebter Linter für CSS. [Eine von der Community verwaltete Stylelint Konfiguration](https://github.com/ota-meshi/stylelint-config-html) verfügt über Astro Support.

Eine Installationsanleitung, Editor Integration und weitere Informationen findest du im README des Projekts.

### Prettier

[Prettier](https://prettier.io/) ist ein beliebtes Code-Formatierungs-Tool für JavaScript, HTML, CSS und mehr. Wenn du die [Astro VS Code Extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) oder [die Astro language server für andere Editoren](#andere-code-editoren) verwendest, ist Code-Formatierung mit Prettier integriert.

Um das Formatieren von `.astro`-Dateien außerhalb des Editors (z.B. in der Kommandozeilen&shy;schnittstelle (CLI)) zu ermöglichen, kannst du das [offizielle Prettier-Plugin für Astro](https://github.com/withastro/prettier-plugin-astro) verwenden.

<Steps>
1. Installiere `prettier` und `prettier-plugin-astro`.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install --save-dev prettier prettier-plugin-astro
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add -D prettier prettier-plugin-astro
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add --dev prettier prettier-plugin-astro
      ```
      </Fragment>
    </PackageManagerTabs>

2. Erstelle eine Konfigurationsdatei `.prettierrc.mjs` im Stammverzeichnis deines Projekts und füge `prettier-plugin-astro` hinzu.

    In dieser Datei gibst du auch den Parser für Astro-Dateien manuell an.

    ```js title=".prettierrc.mjs"
    /** @type {import("prettier").Config} */
    export default {
      plugins: ['prettier-plugin-astro'],
      overrides: [
        {
          files: '*.astro',
          options: {
            parser: 'astro',
          },
        },
      ],
    };
    ```

3. Führe den Befehl `prettier . --write` im Terminal aus, um deine Dateien zu formatieren.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npx prettier . --write
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm exec prettier . --write
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn prettier . --write
      ```
      </Fragment>
    </PackageManagerTabs>
</Steps>

In der [README des Prettier-Plugins](https://github.com/withastro/prettier-plugin-astro/blob/main/README.md) findest du weitere Informationen über die unterstützten Optionen, wie du Prettier in VS Code einrichtest und mehr.
